<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="修改资料"></fa-navbar>
		<view class="u-p-30">
			<u-form :model="form" ref="uForm">
				<u-form-item :label-position="labelPosition" label="修改头像：" prop="avatar" label-width="180">
					<view class="u-list-item" v-if="avatar" @click="selectImage"><image :src="avatar" style="width: 100%;height: 100%;" mode="aspectFit"></image></view>
					<view class="u-list-item u-add-wrap" v-if="!avatar" @click="selectImage">
						<u-icon name="plus"></u-icon>
						<view class="u-add-tips">选择图片</view>
					</view>
				</u-form-item>
				<u-form-item label="用户名：" label-width="180" prop="username"><u-input v-model="form.username" placeholder="请输入用户名" /></u-form-item>
				<u-form-item label="昵称：" label-width="180" prop="nickname"><u-input v-model="form.nickname" placeholder="请输入昵称" /></u-form-item>
				<u-form-item label="个人介绍：" label-width="180" prop="bio"><u-input v-model="form.bio" placeholder="请输入个人介绍" /></u-form-item>
				<u-form-item label="邮箱：" label-width="180" prop="email"><u-input v-model="form.email" placeholder="请输入邮箱" /></u-form-item>
				<u-form-item :label-position="labelPosition" label="邮箱验证码：" prop="eCode" label-width="180">
					<u-input :border="border" placeholder="请输入邮箱验证码" v-model="form.eCode" type="text"></u-input>
					<u-button hover-class="none" slot="right" type="success" :custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" size="mini" @click="getCode('email')">
						{{ codeTips }}
					</u-button>
				</u-form-item>
				<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" :label-position="labelPosition" label="手机号码：" prop="mobile" label-width="180">
					<u-input :border="border" placeholder="请输入手机号" v-model="form.mobile" type="number"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="短信验证码：" prop="mCode" label-width="180">
					<u-input :border="border" placeholder="请输入短信验证码" v-model="form.mCode" type="text"></u-input>
					<u-button hover-class="none" slot="right" type="success" :custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" size="mini" @click="getCode('mobile')">
						{{ codeTips }}
					</u-button>
				</u-form-item>
			</u-form>
			<view class="u-p-30 u-m-t-30">
				<u-button hover-class="none" type="primary" :custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" shape="circle" @click="submit">提交</u-button>
			</view>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.form = {
			avatar: this.vuex_user.avatar.indexOf('base64') != -1 ? '' : this.vuex_user.avatar,
			username: this.vuex_user.username || '',
			nickname: this.vuex_user.nickname || '',
			bio: this.vuex_user.bio || '',
			email: this.vuex_user.email || '',
			eCode: '',
			mobile: this.vuex_user.mobile || '',
			mCode: ''
		};
		this.avatar = this.vuex_user.avatar || '';
	},
	onShow() {
		//先移除头像裁剪的事件，防止上一次的监听事件还在
		uni.$off('uAvatarCropper', this.tailor);
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	data() {
		return {
			labelPosition: 'left',
			border: false,
			codeTips: '',
			errorType: ['message'],
			avatar: '',
			form: {
				avatar: '',
				username: '',
				nickname: '',
				bio: '',
				email: '',
				eCode: '',
				mobile: '',
				mCode: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur']
					}
				],
				nickname: [
					{
						required: true,
						message: '请输入昵称',
						trigger: ['change', 'blur']
					}
				],
				email: [
					{
						required: true,
						message: '请输入邮箱',
						trigger: ['change', 'blur']
					}
				],
				eCode: [
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							if (this.vuex_user.email == this.form.email) {
								return true;
							}
							return !!value;
						},
						message: '请填写邮箱验证码',
						trigger: ['change', 'blur']
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur']
					}
				],
				mCode: [
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							if (this.vuex_user.mobile == this.form.mobile) {
								return true;
							}
							return !!value;
						},
						message: '请填写短信验证码',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	methods: {
		codeChange(text) {
			this.codeTips = text;
		},
		// 获取验证码
		getCode: async function(type) {
			if (this.$refs.uCode.canGetCode) {
				let res = false;
				if (type == 'email') {
					res = await this.$api.getEmsSend({
						email: this.form.email,
						event: 'changeemail'
					});
				} else {
					res = await this.$api.getSmsSend({
						mobile: this.form.mobile,
						event: 'changemobile'
					});
				}
				this.$u.toast(res.msg);				
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		selectImage() {
			//启用事件监听
			uni.$once('uAvatarCropper', this.tailor);
			this.$u.route({
				// 关于此路径，请见下方"注意事项"
				url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
				// 内部已设置以下默认参数值，可不传这些参数
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 300,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: 'jpg'
				}
			});
		},
		//监听到的头像裁剪事件
		tailor: async function(path) {
			try {
				let res = await this.$api.goUpload({filePath:path});
				this.form.avatar = res.data.url;
				this.avatar = path;
			} catch (e) {
				console.error(e);
				this.$u.toast('上传失败！');
			}
		},
		submit() {
			this.$refs.uForm.validate(async valid => {
				if (valid) {
					let res = await this.$api.getUserProfile(this.form);
					if (!res.code) {
						this.$u.toast(res.msg);
						return;
					}
					//修改完，需要替换vuex 的用户信息
					let ur = await this.$api.getUserIndex({
						id: this.vuex_user.id
					});
					if (!ur.code){
						this.$u.toast(res.msg);						
						return;						
					} 
					this.$u.vuex('vuex_user', ur.data.user);
					this.$u.vuex('vuex_isAdmin', ur.data.isAdmin);
					this.$Router.back(1);
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.u-add-wrap {
	flex-direction: column;
	color: $u-content-color;
	font-size: 28rpx;
}

.u-list-item {
	width: 200rpx;
	height: 200rpx;
	overflow: hidden;
	margin: 10rpx;
	background: rgb(244, 245, 246);
	position: relative;
	border-radius: 10rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.u-add-tips {
	margin-top: 20rpx;
	line-height: 40rpx;
}
</style>
